<template>
  <div class="flex">
    <div class="tableBox">
      <div class="subTit">Common</div>
      <div id="table1" class="table"></div>
    </div>
    <div class="tableBox">
      <div class="subTit">Operation</div>
      <div id="table2" class="table"></div>
    </div>
    <div class="tableBox">
      <div class="subTit">Material</div>
      <div id="table3" class="table"></div>
    </div>
    <div class="tableBox">
      <div class="subTit">Engineering</div>
      <div id="table4" class="table"></div>
    </div>
    <!-- <div class="progressBox tableBox">
      <p class="t1">Complete</p>
      <a-progress :percent="30" :strokeColor="'#ff8a00'" :strokeWidth="30" class="progressLine" />
    </div>-->
  </div>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
export default {
  components: {},
  data() {
    return {
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      NumObj: {},
      Common: 0,
      Operation: 0,
      Material: 0,
      Engineering: 0,
    }
  },
  props: {
    echartsInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    echartsInfo(val) {
      console.log('val :>> ', val)
      this.NumObj = val
      this.$nextTick(() => {
        this.init()
      })
      console.log('this.NumObj :>> ', this.NumObj)
      this.Common = this.NumObj.Common
      this.Operation = this.NumObj.Operation
      this.Material = this.NumObj.Material
      this.Engineering = this.NumObj.Engineering
    },
    NumObj() {
      this.init()
    },
  },
  created() {},
  mounted() {
    this.NumObj = this.echartsInfo
    this.Common = this.NumObj.Common
    this.Operation = this.NumObj.Operation
    this.Material = this.NumObj.Material
    this.Engineering = this.NumObj.Engineering
    this.init()
  },
  methods: {
    async init() {
      await this.initOPtions()
      this.table1()
      this.table2()
      this.table3()
      this.table4()
    },
    table1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('table1'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option1, true)
    },
    table2() {
      let myChart = this.$echarts.init(document.getElementById('table2'))
      myChart.setOption(this.option2, true)
    },
    table3() {
      let myChart = this.$echarts.init(document.getElementById('table3'))
      myChart.setOption(this.option3, true)
    },
    table4() {
      let myChart = this.$echarts.init(document.getElementById('table4'))
      myChart.setOption(this.option4, true)
    },
    initOPtions() {
      let option = {
        value: 20, //百分比,必填
        name: '', //必填
        title: '',
        backgroundColor: null,
        color: ['#38a8da', '#d4effa'],
        fontSize: 16,
        domEle: document.getElementById('pieDiagram'), //必填
      }

      this.backgroundColor = option.backgroundColor || '#fff'
      this.color = option.color || ['#38a8da', '#d4effa']
      this.fontSize = option.fontSize || 12
      this.domEle = option.domEle
      this.title = option.title
      let _that = this
      // 数据变化
      let name1 = 'Common'
      let name2 = 'Operation'
      let name3 = 'Material'
      let name4 = 'Engineering'

      this.option1 = {
        backgroundColor: _that.backgroundColor,
        color: _that.color,
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: _that.fontSize,
                  fontWeight: 'bold',
                },
                formatter: '{b}\n{c}',
              },
            },
            data: [
              {
                value: _that.Common,
                name: name1,
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 100 - _that.Common,
                name: '',
              },
            ],
          },
        ],
      }

      this.option2 = {
        backgroundColor: _that.backgroundColor,
        color: _that.color,
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: _that.fontSize,
                  fontWeight: 'bold',
                },
                // formatter: '{b}\n{c}%',
                formatter: '{b}\n{c}',
              },
            },
            data: [
              {
                value: _that.Operation,
                name: name2,
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 100 - _that.Operation,
                name: '',
              },
            ],
          },
        ],
      }
      this.option3 = {
        backgroundColor: _that.backgroundColor,
        color: _that.color,
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: _that.fontSize,
                  fontWeight: 'bold',
                },
                formatter: '{b}\n{c}',
              },
            },
            data: [
              {
                value: _that.Material,
                name: name3,
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 100 - _that.Material,
                name: '',
              },
            ],
          },
        ],
      }
      this.option4 = {
        backgroundColor: _that.backgroundColor,
        color: _that.color,
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: _that.fontSize,
                  fontWeight: 'bold',
                },
                formatter: '{b}\n{c}',
              },
            },
            data: [
              {
                value: _that.Engineering,
                name: name4,
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 100 - _that.Engineering,
                name: '',
              },
            ],
          },
        ],
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  .tableBox {
    flex: 1;
  }
  .table {
    width: 100%;
    height: 300px;
  }
  .subTit {
    text-align: center;
    font-size: 28px;
  }
}
.progressBox {
  // padding: 50px 0;
  width: 100%;
  height: 300px;
  position: relative;
  .t1 {
    font-size: 25px;
    text-align: center;
  }
  .progressLine {
    position: absolute;
    bottom: 50px;
    height: 50px;
  }
}
</style>